@import "./element-2.scss";
$--color-black-comp: rgba(33, 40, 63, 0.8);

/* button------ */
.el-button {
  &.is-disabled {
    color: $--font-color-disabled-base !important;
  }

  &.is-plain:hover,
  &.is-plain:focus {
    color: $--color-black !important;
  }

  // &.el-button--default {
  //   background-color: $--color-black-comp;
  // }
  &.el-button--default.is-plain {
    background-color: transparent;

    &:hover,
    &:focus {
      color: $--color-primary !important;
    }
  }

  &.el-button--text {
    span {
      color: $-color-primary;
    }
  }

  &.is-plain.el-button--primary {
    span {
      color: $-color-primary;
    }

    &:hover,
    &:focus {
      span {
        color: $-color-white;
      }
    }
  }

  &.is-plain.el-button--success {
    span {
      color: $--color-success;
    }

    &:hover,
    &:focus {
      span {
        color: $-color-white;
      }
    }
  }

  &.is-plain.el-button--warning {
    span {
      color: $--color-warning;
    }

    &:hover,
    &:focus {
      span {
        color: $--color-white;
      }
    }
  }

  &.is-plain.el-button--danger {
    span {
      color: $--color-danger;
    }

    &:hover,
    &:focus {
      span {
        color: $--color-white;
      }
    }
  }
}

/* .el-input-numbe
    ------------------------------------ */
.el-input-number {
  >span {
    height: calc(100% - 2px);
  }

  .el-input-number__increase,
  .el-input-number__decrease {
    background-color: $--color-black-1;
  }
}

/* radio
  -------------------------------------- */
.el-radio {
  border-color: $--color-black-comp !important;

  .el-radio__inner::after {
    background-color: $--color-black;
    // background-color: rgba($--color-primary , .5);
  }

  .el-radio__input {
    .el-radio__inner {
      background-color: rgb(63, 132, 235);
    }
  }
}

.el-radio-button {
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: $--color-black;
  }

  .el-radio-button__orig-radio:disabled:checked+.el-radio-button__inner {
    background-color: $--disabled-fill-base;
    color: $--font-color-disabled-base;
  }

  .el-radio-button__orig-radio:disabled+.el-radio-button__inner {
    border-color: $--color-black-comp;
  }
}

/* checkbox
  --------------------- */
.el-checkbox {
  border-color: $--color-black-comp !important;

  .el-checkbox__input.is-disabled:not(.is-checked) {
    .el-checkbox__inner {
      background-color: $--color-black;
    }
  }
}

/* el-input-gounp
  --------------------- */
.el-input-group {

  .el-input-group__append,
  .el-input-group__prepend {
    background-color: $--color-black-1;
  }
}

/* input
  --------------------- */
.el-input {
  .el-input__inner:hover {
    border-color: $--color-primary;
  }

  &.is-disabled .el-input__inner {
    // border-color: $--color-black-comp;
    background: rgba(33, 40, 63, 0.8);
  }
}

/* textarea
  --------------------- */
.el-textarea__inner:hover {
  border-color: $--color-primary;
}

/* switch
  ---------------------- */
.el-switch {
  .el-switch__label {
    span {
      color: $-color-placeholder;
    }
  }

  .el-switch__label.is-active {
    span {
      color: $-color-primary;
    }
  }

  .el-switch__core:after {
    background-color: $-color-white;
  }
}

/* slider
  ----------------------- */
.el-slider {
  .el-slider__button {
    height: 8px;
    width: 8px;
    border-width: 4px;
    background-color: $--color-black-5;
  }

  .el-slider__runway {
    background-color: $--color-black-1;
  }
}

/* .el-select-dropdown
  ---------------------------------*/
.el-select-dropdown,
.el-dropdown-menu {
  border-color: $--color-black-comp;
  background-color: $--color-black-comp;

  .el-select-dropdown__wrap.el-scrollbar__wrap {
    // margin-right: -17px !important;
    // margin-bottom: -17px !important;
  }

  .el-dropdown-menu__item--divided {
    border-color: $--color-black-comp;
  }

  .el-select-dropdown__item:hover {
    background-color: #054c6b;
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #054c6b;
  }

  .el-dropdown-menu__item:not(.is-disabled):hover,
  .el-dropdown-menu__item:focus {
    // color:
    color: rgba(33, 40, 63, 0.8);
  }
}

/* el-dropdown
  ---------------------------------- */
.el-dropdown {
  .el-dropdown__caret-button::before {
    background-color: $--color-black-comp;
    top: 0;
    bottom: 0;
  }
}



/* .el-cascader__dropdown
  -------------------------*/
.el-cascader__dropdown {
  border-color: $--color-black-comp;

  .el-cascader-menu {
    border-color: $--color-black-comp;
  }
}

/* time-date-picker
  ------------------------ */
.el-date-editor {
  .el-range-input {
    background-color: transparent;
  }

  &.el-input__inner:hover {
    border-color: $--color-primary;
  }
}

.el-picker-panel,
.el-time-panel {
  border-color: $--color-black-comp !important;
}

.el-date-table td.today.start-date span,
.el-date-table td.today.end-date span {
  color: $--color-black;
}

.el-time-panel__content::before {
  border: none;
  background-color: rgba($--color-black-5, 0.1);
  z-index: 2;
  pointer-events: none;
  margin-left: 0;
  margin-right: 0;
}

.el-time-panel__footer,
.el-picker-panel__footer {
  border-color: $--color-black-comp;
}

.el-time-range-picker__body,
.el-time-panel__content {
  border: none;
  background-color: $--color-black-1;
  background-image: $--color-linear;
  // box-shadow: inset 0 0 12px $--color-black;
}

.el-date-range-picker__time-header {
  border-color: $--color-black-comp;
}

.el-date-table th {
  border-color: $--color-black-comp;
}

.el-date-range-picker__content.is-left {
  border-color: $--color-black-comp;
}

.el-date-table td.start-date div,
.el-date-table td.end-date div,
.el-date-table td.current:not(.disabled) span {
  color: $--color-black;
  font-weight: bold;
}

/* el-rate
  ----------------------- */
.el-rate {
  .el-rate__icon.el-icon-star-off {
    color: $--color-black-4 !important;
  }
}

/* el-color-picker
  ----------------------- */
.el-color-picker {
  .el-color-picker__trigger {
    border-color: $--color-black-comp;
  }

  .el-color-picker__color {
    border-color: $--color-black-comp;
    // border: none;
  }

  .el-color-picker__icon {
    color: $--color-black;
  }
}

.el-color-dropdown {
  border-color: $--color-black-comp;
}

/* el-transfer
  ------------------------- */
.el-transfer {
  .el-transfer-panel {
    border-color: $--color-black-comp;
  }

  .el-transfer-panel__header,
  .el-transfer-panel__footer {
    border-color: $--color-black-comp;
  }
}

.el-empty__image {
  display: none;
}
